<template>
	<view>
		<!-- <view>
			<image style="height: 300rpx;width: 750rpx;" src="../../static/image/top.png"></image>
		</view> -->
		<view>
			<u-tabs :list="list3" :scrollable='scrollable' @click="click" :activeStyle='activeStyle' :inactiveStyle='inactiveStyle'>
			</u-tabs>
		</view>
		<view v-if="state == 0" class="u-page" v-for="(item,index) in list4" :key="index">
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<u-row customStyle="margin-bottom: 10px;margin-top:50rpx">
						<u-col span="8">
							<view class="demo-layout bg-purple">
								<view class="text_two">城市西进 中建壹品璟苑先鉴漳河腾飞势</view>
								<view class="text_three">中建壹品璟苑</view>
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout bg-purple-light">
								<image class="span_two" :src="src" radius="30rpx">
								</image>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view style="margin-left: 50rpx;">
				<u-line length="97%" color="#8e8e8e"></u-line>
			</view>
		</view>
		<view v-if="state == 1" class="u-page" v-for="(item,index) in list4" :key="index">
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<u-row customStyle="margin-bottom: 10px;margin-top:50rpx">
						<u-col span="8">
							<view class="demo-layout bg-purple">
								<view class="text_two">印象未来城102022年11月04日 </view>
								<view class="text_three">中建壹品璟苑</view>
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout bg-purple-light">
								<image class="span_two" :src="src" radius="30rpx">
								</image>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view style="margin-left: 50rpx;">
				<u-line length="97%" color="#8e8e8e"></u-line>
			</view>
		</view>
		<view v-if="state == 2" class="u-page" v-for="(item,index) in list4" :key="index">
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<u-row customStyle="margin-bottom: 10px;margin-top:50rpx">
						<u-col span="8">
							<view class="demo-layout bg-purple">
								<view class="text_two">11月10起，毕节市中心城区货车禁限行管理执行新规 </view>
								<view class="text_three">中建壹品璟苑</view>
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout bg-purple-light">
								<image class="span_two" :src="src" radius="30rpx">
								</image>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view style="margin-left: 50rpx;">
				<u-line length="97%" color="#8e8e8e"></u-line>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list3: [ {
					name: '资讯',
				}, {
					name: '国内资讯',
				}, {
					name: '毕节民生',
				},],
				list4:[{},{},{}],
				src: "https://cdn.uviewui.com/uview/album/1.jpg",
				state:0
			}
		},
		methods: {
			click(item) {
				console.log('item', item);
				this.state = item.index
			},
		}
	}
</script>

<style>
	.span_two {
		float: right;
		height: 150rpx;
		width: 200rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
	}
.demo-layout {
		height: 200rpx;
		border-radius: 4px;
	}

	.bg-purple {
		background: #ffffff;

	}

	.bg-purple-light {
		background: #ffffff;
		margin-left: 10rpx;
	}

	.bg-purple-dark {
		background: #ffffff;
	}
	.text_three {
		font-size: 25rpx;
		color: #8E8E8E;
		margin: 50rpx 0 0 50rpx;
	}
	
	.text_two {
		font-size: 32rpx;
		font-weight: 900;
		margin-left: 50rpx;
	}
</style>
